<template>
  <div id="browser" ref="browserBoxMain">
    <div class="title">
      <span class="line"></span>
      <span v-if="sendData.label=='账号'"><i class="el-icon-s-platform"></i> 浏览器账户信息</span>
      <span v-if="sendData.label=='书签'"><i class="el-icon-s-platform"></i> 浏览器书签信息</span>
      <span v-if="sendData.label=='浏览历史'"><i class="el-icon-s-platform"></i> 浏览器浏览历史</span>
      <span v-if="sendData.label=='搜索记录'"><i class="el-icon-s-platform"></i> 浏览器搜索记录</span>
      <span v-if="sendData.label=='下载'"><i class="el-icon-s-platform"></i> 浏览器下载记录</span>
      <el-button
        style="
          float: right;
          margin-left: 10px;
          margin-right: 10px;
          margin-top: 6px;
          color: #fff;
        "
        type="text"
        @click="printPdf"
        ><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>
    </div>    
    <!-- 手机UI -->
    <!-- <div class="browserList">
        <div class="borwserItem" v-for="(item,index) in tableData" :key="index">
        <div>
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 18V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V18" stroke="#73b3f8" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 8C6 6.89543 6.89543 6 8 6H40C41.1046 6 42 6.89543 42 8V18H6V8Z" fill="#73b3f8" stroke="#73b3f8" stroke-width="4" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#FFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#FFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C25.1046 14 26 13.1046 26 12C26 10.8954 25.1046 10 24 10C22.8954 10 22 10.8954 22 12C22 13.1046 22.8954 14 24 14Z" fill="#FFF"/></svg>
        </div>
        <img v-if="item.avatar" :src="item.avatar" height="50" width="50" alt="">
          <div v-if="sendData.label=='账号'" style="width:300px;">
              <div>{{$t('wechat.account')}}：{{item.accountuid}}</div>
              <div>名称：{{item.accountname}}</div>
          </div>
        </div>
    </div> -->
    <!-- <el-table border height="770" stripe :data="tableData" style="width: 100%">
      <el-table-column
        :prop="item"
        align="center"
        :label="formateLabel(item)"
        v-for="(item, index) in headerTitle"
        :key="index"
        v-if="item!=='cnt' && item!=='visits' && item!=='cntRemark' && item!=='id' && item!=='app_name'"
      >
      <template slot-scope="scope">
        <div v-if="item=='avatar'">
          <img :src="scope.row[item]" alt="">
        </div>
        <div v-else-if="item=='recovery'">
          <span v-if="scope.row[item]==1"><el-tag type="danger">已删除</el-tag></span>
          <span v-else><el-tag type="success">未删除</el-tag></span>
        </div>
        <div v-else-if="item=='url' || item=='title'">
          <div class="urlItem">{{scope.row[item]}}</div>
        </div>
        <div v-else-if="item=='image'">
          <img width="50px" height="50px" :src="scope.row[item]" alt="">
        </div>
        <a class="aTag" :href="scope.row[item]" target="_blank" v-else-if="item=='url' && sendData.label=='下载'">{{scope.row[item]}}</a>
        <div v-else-if="item=='ctime'">
        {{formateDate(scope.row.ctime)}}
        </div>
        <a :href="scope.row[item]" target="_blank" v-else-if="item=='url' && sendData.label!=='下载'"><div ><el-button size="small">前往查看</el-button></div></a>
        <div v-else>{{scope.row[item]}}</div>
      </template>
      </el-table-column>
        <el-table-column label="操作" >
        <template slot-scope="scope">
          <div class="badgeBox" v-if="scope.row.cntRemark>0">{{$t('wechat.remarked')}}</div>
          <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(scope.row)"  size="mini" style="color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
        </template>
      </el-table-column>
    </el-table> -->

    <div id="browserListApi1" class="browserList">
      <!-- 账号信息 -->
        <div class="listItem" v-if="sendData.model=='browser_account'" v-for="(item,index) in tableData" :key="index">
          <div>
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="12" r="8" fill="none" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 44C42 34.0589 33.9411 26 24 26C14.0589 26 6 34.0589 6 44" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <div style="width:60%;">
            <div>{{$t('wechat.account')}}：{{item.accountname}}</div>
            <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{$t('wechat.username')}}：{{item.accountnick}}</div>
          </div>
          <div>
            <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)"  size="mini" style="color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        <!-- 书签 -->
        <div class="listItem" title="点击跳转查看详情" @click="openBroswer(item.url)" v-if="sendData.model=='browser_bookmark'" v-for="(item,index) in tableData" :key="index">
          <div>
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 10V4H8V38L14 35" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 44V10H40V44L27 37.7273L14 44Z" fill="none" stroke="#3488eb" stroke-width="3" stroke-linejoin="round"/></svg>
          </div>
          <div style="width:60%;font-size:12px;">
            <div :title="item.title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">标题：{{item.title}}</div>
            <div style="color:red;" v-if="item.recovery==1">状态：已删除</div>
            <div v-else>状态：未删除</div>
            <div>创建时间：{{formateDate(item.ctime)}}</div>
          </div>
          <div>
            <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)"  size="mini" style="color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        <!-- 历史记录 -->
        <div class="listItem" style="height:100px;" title="点击跳转查看详情" @click="openBroswer(item.url)" v-if="sendData.model=='browser_history'" v-for="(item,index) in tableData" :key="index">
          <div>
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.81836 6.72729V14H13.0911" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C16.598 4 10.1351 8.02111 6.67677 13.9981" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24.005 12L24.0038 24.0088L32.4832 32.4882" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <div style="width:60%;font-size:12px;">
            <div v-if="item.title" :title="item.title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">标题：{{item.title}}</div>
            <div style="color:red;" v-if="item.recovery==1">状态：已删除</div>
            <div v-else>状态：未删除</div>
            <div :title="item.url" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">URL：{{item.url}}</div>
            <div>创建时间：{{formateDate(item.ctime)}}</div>
          </div>
          <div>
            <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)"  size="mini" style="color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        <!-- 搜索历史 -->
        <div class="listItem" title="点击跳转查看详情" @click="openBroswer(item.url)" v-if="sendData.model=='browser_searchhistory'" v-for="(item,index) in tableData" :key="index">
          <div>
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 24V9C42 7.34315 40.6569 6 39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H24" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle cx="32" cy="32" r="6" fill="none" stroke="#3488eb" stroke-width="3"/><path d="M37 36L42 40" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 16H34" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 24L22 24" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <div style="width:60%;font-size:12px;">
            <div :title="item.title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">关键字：{{item.key}}</div>
            <div style="color:red;" v-if="item.recovery==1">状态：已删除</div>
            <div v-else>状态：未删除</div>
            <div :title="item.url" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">URL：{{item.url}}</div>
          </div>
          <div>
            <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)"  size="mini" style="color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        <!-- 下载记录 -->
        <div class="listItem" style="height:120px;" title="点击下载文件" @click="openBroswer(item.url)" v-if="sendData.model=='browser_download'" v-for="(item,index) in tableData" :key="index">
          <div>
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27 40H7C5.34315 40 4 38.6569 4 37V11C4 9.34315 5.34315 8 7 8H41C42.6569 8 44 9.34315 44 11V24" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M34 36L39 41L44 36" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M39 29L39 41" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 11C4 9.34315 5.34315 8 7 8H41C42.6569 8 44 9.34315 44 11V20H4V11Z" fill="none" stroke="#3488eb" stroke-width="3"/><circle r="2" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 10 14)" fill="#3488eb"/><circle r="2" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 16 14)" fill="#3488eb"/></svg>
          </div>
          <div style="width:60%;font-size:12px;" title="点击下载">
            <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" :title="item.title">文件名：{{item.title}}</div>
            <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" :title="item.phone_path">文件路径：{{item.phone_path}}</div>
            <div :title="item.url" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">URL：{{item.url}}</div>
            <div>创建时间：{{formateDate(item.ctime)}}</div>
            <div style="color:red;" v-if="item.recovery==1">状态：已删除</div>
            <div v-else>状态：未删除</div>
          </div>
          <div>
            <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)"  size="mini" style="color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
    </div>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>

    <div class="block" v-if="sendData.model!=='browser_account'">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="offset"
      :page-sizes="[20, 30, 40, 50]"
      :page-size="limit"
      layout="total, prev,pager, next,->, jumper"
      :total="total" hide-on-single-page :pager-count="5">
    </el-pagination>
  </div>

  </div>
</template>
<script>
import { getBrowserInfo,getBookmarkInfo,getHistoryInfo,getSearchInfo,getBrowserAllInfo } from "@/api/browser/browser_api"
import { parseTime } from '@/utils/index'
import print from 'print-js'
import html2canvas from "html2canvas"
import { sendMarkOrderApi } from '@/api/markApi/index'
export default {
  name: "borwser1",
  props:['sendData'],
  data() {
    return {
      app_name:'',
      showRemark:false,
      remark:'',
      id:'',
      tableTitle:'浏览器账户信息',
      headerTitle: [
      ],
      tableData: [
      ],
      offset:1,
      limit:20,
      total:0,
      // labelList:[
      //   {
      //     title:'ctime',
      //     translate:'时间'
      //   },
      //   {
      //     title:'image',
      //     translate:'图片'
      //   },
      //   {
      //     title:'recovery',
      //     translate:'类型'
      //   },
      //   {
      //     title:'title',
      //     translate:'标题'
      //   },
      //   {
      //     title:'url',
      //     translate:'查看'
      //   },
      //   {
      //     title:'source',
      //     translate:'来源'
      //   },
      //   {
      //     title:'visits',
      //     translate:'访问'
      //   },
      //   {
      //     title:'key',
      //     translate:'关键词'
      //   },
      //   {
      //     title:'accountname',
      //     translate:'账户名'
      //   },
      //   {
      //     title:'accountnick',
      //     translate:'账户昵称'
      //   },
      //   {
      //     title:'avatar',
      //     translate:'头像'
      //   },
      // ]
    };
  },
  watch:{
    '$store.state.account.browser1':function(){
      this.tableData = [];
    if(this.sendData.list_offset){
      this.offset=this.sendData.list_offset;
      this.limit=this.sendData.list_limit;
    }else{
      this.offset=1;
      this.total=0;
    }
      this.init()
    }
  },
  created(){
    if(this.sendData.list_offset){
      this.offset=this.sendData.list_offset;
      this.limit=this.sendData.list_limit;
    }else{
      this.offset=1;
      this.total=0;
    }
    this.init()
  },
  methods:{
    // 点击下载文件
    openBroswer(url){
      window.open(url,'_blank');
    },
    // 定位当前框域
    getRefsAff(){
      return  this.$refs.browserBoxMain;
    },
    handleOk(){
        let data={
            navigation_list:sessionStorage.getItem('arr').split(','),
            model:this.sendData.model,
            isChat:0,
            app_name:JSON.parse(sessionStorage.getItem('sumData')).app_name,
            account_id:this.sendData.account_id,
            proof_num:this.sendData.proof_num,
            list_offset:this.offset,  
            list_limit:this.limit,
            remark:this.remark,
            class:this.sendData.class,
            label:this.sendData.label,
            id:Number(this.id)
        }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.init()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.showRemark=true;
    },
    // formateLabel(label){
    //   let data=''
    //   for (let index = 0; index < this.labelList.length; index++) {
    //     const element = this.labelList[index];
    //     if(label==element.title){
    //       data=element.translate
    //       break
    //     }
    //   }
    //   return data
    // },
    formateDate(date){
      return parseTime(date)
    },
    init(){
      this.app_name=this.sendData.app_name;
      this.tableData=[]
      this.headerTitle=[]
      if(this.sendData.model=="browser_account"){
        this.account();
      }else if(this.sendData.model=="browser_bookmark"){
        this.bookmark();
      }else if(this.sendData.model=="browser_history"){
        this.history();
      }else if(this.sendData.model=="browser_searchhistory"){
        this.searchhistory();
      }else if(this.sendData.model=="browser_download"){
        this.downLoad();
      }
    },
    account(){
      let data={
          proof_num:this.sendData.proof_num,
          app_name:this.sendData.app_name,
          model:this.sendData.model
      }
    getBrowserInfo(data).then(res=>{
            this.tableData=res.data
            this.total=res.data[0].cnt
            for(var key in res.data[0]){
              this.headerTitle.push(key)
            }
      })
    },
    bookmark(){
    let data={
          proof_num:this.sendData.proof_num,
          app_name:this.sendData.app_name,
          model:this.sendData.model,
          offset:this.offset,
          limit:this.limit,
      }
    getBookmarkInfo(data).then(res=>{
            this.tableData=res.data
            this.total=res.data[0].cnt
            for(var key in res.data[0]){
              this.headerTitle.push(key)
            }
      })
    },
    history(){
          let data={
          proof_num:this.sendData.proof_num,
          app_name:this.sendData.app_name,
          // app_name:"explorer_360",
          model:this.sendData.model,
          offset:this.offset,
          limit:this.limit,
      }
    getHistoryInfo(data).then(res=>{
            this.tableData=res.data
            this.total=res.data[0].cnt
            for(var key in res.data[0]){
              this.headerTitle.push(key)
            }
      })
    },
    searchhistory(){
        let data={
          proof_num:this.sendData.proof_num,
          app_name:this.sendData.app_name,
          model:this.sendData.model,
          offset:this.offset,
          limit:this.limit,
      }
    getSearchInfo(data).then(res=>{
            this.tableData=res.data
            this.total=res.data[0].cnt
            for(var key in res.data[0]){
              this.headerTitle.push(key)
            }
      })
    },
    downLoad(){
      let data={
          proof_num:this.sendData.proof_num,
          app_name:this.sendData.app_name,
          model:this.sendData.model,
          offset:this.offset,
          limit:this.limit,
      }
    getBrowserAllInfo(data).then(res=>{
            this.tableData=res.data
            this.total=res.data[0].cnt
            for(var key in res.data[0]){
              this.headerTitle.push(key)
            }
      })
    },
    handleSizeChange(val) {
        this.limit=val
        this.init();
      },
    handleCurrentChange(val) {
        this.offset=val
        this.init();
    },
    printPdf(){
        printJS({
          printable: 'browserListApi1',// 直接传入元素 id
          type: 'html',
          targetStyles: ['*'],// 保留页面样式
          scanStyles: false,
          style:`.listItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.listItem{
  height:80px;
  /* border: 1px solid red; */
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.listItem:hover{
  background: #e8e8e8;
}
.borwserItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  /* border: 1px solid red; */
}
.browserList{
  height: 100%;
  /* border: 1px solid red; */
  overflow-y: auto;
  padding-bottom:200px;
}
@media screen and (min-width: 2360px) {
  .browserList{
    height: 79vh;
  }
}
@media screen and (min-width: 2561px) {
  .browserList{
    height: 64vh;
  }
}

.browserList::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.browserList::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.browserList::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #e4e4e4;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 6px;
}
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
.biaozhuimg{
  width: 60px;
  height: 60px;
}
.urlItem{
  height: 100px;
  max-height:200px;
  overflow-y: auto;
}
.aTag{
  text-decoration:underline;
  color: rgb(34, 109, 248);
}
.aTag:hover{
  color: #4f00a8;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}`
});
    },
  }
};
</script>
<style scoped>
.listItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.listItem{
  height:80px;
  /* border: 1px solid red; */
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.listItem:hover{
  background: #e8e8e8;
}
.borwserItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  /* border: 1px solid red; */
}
.browserList{
  /* height:93vh; */
  height: 84vh;
  /* border: 1px solid red; */
  overflow-y: auto;
  padding-bottom:200px;
}
@media screen and (min-width: 2360px) {
  .browserList{
    height: 79vh;
  }
}
@media screen and (min-width: 2561px) {
  .browserList{
    height: 64vh;
  }
}

.browserList::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.browserList::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.browserList::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #e4e4e4;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 6px;
}
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
.biaozhuimg{
  width: 60px;
  height: 60px;
}
.urlItem{
  height: 100px;
  max-height:200px;
  overflow-y: auto;
}
.aTag{
  text-decoration:underline;
  color: rgb(34, 109, 248);
}
.aTag:hover{
  color: #4f00a8;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
</style>